<template>
  <table class="d-table d-table-striped d-table-bordered d-table-hover">
    <thead>
      <tr>
        <th><i class="d-text-danger">*</i>名称</th>
        <th>值</th>
        <th>描述</th>
        <th class="wide-sm">操作</th>
      </tr>
    </thead>
    <tbody v-if="headers && headers.length > 0">
      <tr v-for="(item, i) in headers" :key="item.id">
        <td>
          <div>
            <input
              class="d-form-input" type="text"
              placeholder="例如:token、appid"
              maxlength="40"
              v-model="item.name"
            />
          </div>
        </td>
        <td>
          <div>
            <input
              class="d-form-input" type="text"
              maxlength="200"
              v-model="item.value"
            />
          </div>
        </td>
        <td>
          <div>
            <input
              class="d-form-input" type="text"
              maxlength="40"
              v-model="item.desc"
            />
          </div>
        </td>
        <td class="d-vm d-vm-actions">
          <div class="d-bar-tools d-bar-tools-condensed d-grid-actions">
            <a @click="addRow(i)" class="d-tools-item d-text-linker"><PlusIcon size="sm" /></a>
            <a @click="delRow(i)" class="d-tools-item d-text-linker"><DeleteIcon size="sm" /></a>
          </div>
        </td>
      </tr>
    </tbody>
    <tbody v-else>
      <tr>
        <td class="d-text-center" colspan="4">
          <a
            class="d-text-linker" title="添加"
            @click="addRow"
          ><PlusIcon /></a>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { strer } from '@daelui/dogjs/dist/components.js'
import { Dialoger } from '@daelui/vdog/dist/components.js'
import { zh as locale } from '@daelui/dogjs/dist/locale.js'
import { PlusIcon, DeleteIcon } from '@daelui/vdog/dist/icons.js'

export default {
  components: {
    PlusIcon,
    DeleteIcon
  },
  props: {
    headers: {
      type: Array,
      default() {
        return []
      }
    }
  },

  methods: {
    /**
     * @function 添加响应头
    */
    addRow (i) {
      if (typeof i === 'number') {
        this.headers.splice(i + 1, 0, {
          id: strer.utid(12),
          name: '',
          value: '',
          desc: ''
        })
      } else {
        this.headers.push({
          id: strer.utid(12),
          name: '',
          value: '',
          desc: ''
        })
      }
    },

    /**
     * @function 删除响应头
    */
    delRow (i) {
      Dialoger.confirm(locale.message.confirmDelete).then(b => {
        if (!b) {
          return false
        }
        this.headers.splice(i, 1)
      })
    }
  }
}
</script>

<style lang="less">

</style>
